<template>
  <div class="estateList">
    <div class="title">
      小区列表
    </div>
    <!-- 顶部搜索 -->
    <div class="header-top">
      <el-form :inline="true">
        <el-form-item label="城市">
          <el-select v-model="tiaojian.city" placeholder="选择城市" style="width: 120px;">
            <el-option v-for="(item, index) in options.city" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小区名">
          <el-input clearable v-model="tiaojian.text" placeholder="标题" style="width: 150px;"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="search" type="primary" @click="goSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <el-table :data="initData.list" style="width: 100%" max-height="450" v-loading="loading">
      <el-table-column align="center" header-align='center' type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" header-align="center" prop="estateName" label="小区名称">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="city" label="城市">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="location" label="所属区域">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="average" label="均价" sortable>
        <template slot-scope="scope">
          {{scope.row.average}}元/㎡
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="sellingTotal" label="在售数量" sortable>
        <template slot-scope="scope">
          在售房源{{scope.row.sellingTotal}}套
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="deal" label="30天内成交量" sortable>
        <template slot-scope="scope">
          30天内成交{{scope.row.deal}}套
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="builtYear" label="建筑年代" sortable>
        <template slot-scope="scope">
          {{scope.row.builtYear}}建成
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" fixed="right" label="操作" width="210">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="checkInfo(scope.row)">查看</el-button>
          <el-button type="warning" size="mini" @click="editInfo(scope.row)">编辑</el-button>
          <!-- <el-button type="danger" size="mini">删除</el-button> -->

          <el-popconfirm title="确定删除此小区吗？" @confirm="delRecord(scope.row)" style="margin-left:10px">
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 15, 20]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="params.total">
    </el-pagination>

    <!-- 查看对话框 -->
    <el-dialog :visible.sync="dialog.check" width="600px" center>
      <template slot="title">
        <b>查看小区信息</b>
      </template>
      <el-form ref="infoData" :model="infoData" label-width="100px" :inline="true">
        <el-form-item label="小区名：" style="margin-bottom: 0px;width:173px;">
          {{infoData.estateName}}
        </el-form-item>

        <el-form-item label="所在城市：" style="margin-bottom: 0px;width:173px;">
          {{infoData.city}}
        </el-form-item>

        <el-form-item label="所属地区：" style="margin-bottom: 0px;width:173px;">
          {{infoData.location}}
        </el-form-item>

        <el-form-item label="地址：" style="margin-bottom: 0px;display: block;">
          {{infoData.address}}
        </el-form-item>

        <el-form-item label="小区均价：" style="margin-bottom: 0px;width:255px;">
          {{infoData.average}}元/㎡
        </el-form-item>

        <el-form-item label="建筑面积：" style="margin-bottom: 0px;width:255px;">
          {{infoData.builtArea}}㎡
        </el-form-item>

        <el-form-item label="在售房源：" style="margin-bottom: 0px;width:255px;">
          {{infoData.sellingTotal}}套
        </el-form-item>

        <el-form-item label="30天内成交：" style="margin-bottom: 0px;width:255px;">
          {{infoData.deal}}套
        </el-form-item>

        <el-form-item label="规划户数：" style="margin-bottom: 0px;width:255px;">
          {{infoData.plannednumber}}户
        </el-form-item>

        <el-form-item label="车位个数：" style="margin-bottom: 0px;width:255px;">
          {{infoData.carplace}}个
        </el-form-item>

        <el-form-item label="建筑结构：" style="margin-bottom: 0px;width:255px;">
          {{infoData.structure}}
        </el-form-item>

        <el-form-item label="用水：" style="margin-bottom: 0px;width:255px;">
          {{infoData.water}}
        </el-form-item>

        <el-form-item label="用电：" style="margin-bottom: 0px;width:255px;">
          {{infoData.power}}
        </el-form-item>

        <el-form-item label="用气：" style="margin-bottom: 0px;width:255px;">
          {{infoData.gas}}
        </el-form-item>

        <el-form-item label="绿化情况：" style="margin-bottom: 0px;width:255px;">
          {{infoData.green}}%
        </el-form-item>

        <el-form-item label="容积比率：" style="margin-bottom: 0px;width:255px;">
          {{infoData.volume}}
        </el-form-item>

        <el-form-item label="物业费用：" style="margin-bottom: 0px;width:255px;">
          {{infoData.propertyFee}}元/㎡
        </el-form-item>

        <el-form-item label="建成年代：" style="margin-bottom: 0px;width:255px;">
          {{infoData.builtYear}}年
        </el-form-item>

        <el-form-item label="物业用途：" style="margin-bottom: 0px;width:255px;">
          {{infoData.purpose}}
        </el-form-item>

        <el-form-item label="产权性质：" style="margin-bottom: 0px;width:255px;">
          {{infoData.nature}}
        </el-form-item>

        <el-form-item label="物业公司：" style="margin-bottom: 0px;width:255px;">
          {{infoData.property}}
        </el-form-item>

        <el-form-item label="附近门店：" style="margin-bottom: 0px;width:255px;">
          {{infoData.branch}}
        </el-form-item>

        <el-form-item label="小区配套：" style="margin-bottom: 0px;display:block;">
          {{infoData.facilities}}
        </el-form-item>

        <el-form-item label="体育设施：" style="margin-bottom: 0px;display:block;">
          {{infoData.sport}}
        </el-form-item>

        <el-form-item label="小区描述：" style="margin-bottom: 0px;display:block;">
          {{infoData.desc}}
        </el-form-item>

        <el-form-item label="附近交通：" style="margin-bottom: 0px;display:block;">
          {{infoData.traffic}}
        </el-form-item>

        <el-form-item label="小区封面：" style="margin-bottom: 0px;width:255px;">
          <img :src="infoData.img" alt="" width="250">
        </el-form-item>

        <div style="text-align: center;">
          <el-button type="primary" @click="dialog.check = false" style="width: 100px">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="dialog.edit" width="670px" center>
      <template slot="title">
        <b>编辑小区信息</b>
      </template>
      <el-form ref="infoData2" :model="infoData" label-width="100px" :inline="true" :rules="rule">
        <el-form-item label="小区名：" prop="estateName">
          <el-input v-model="infoData.estateName" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="所在城市：" prop="city">
          <el-input v-model="infoData.city" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="所属地区：" prop="location">
          <el-input v-model="infoData.location" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="地址：" prop="address">
          <el-input v-model="infoData.address" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="小区均价：" prop="average">
          <el-input v-model="infoData.average" style="width:200px;" onkeyup="value=value.replace(/[^\d\.]/g,'')">
            <span slot="suffix">元/㎡</span>
          </el-input>
        </el-form-item>

        <el-form-item label="建筑面积：" prop="builtArea">
          <el-input v-model="infoData.builtArea" style="width:200px;" onkeyup="value=value.replace(/[^\d\.]/g,'')">
            <span slot="suffix">㎡</span>
          </el-input>
        </el-form-item>

        <el-form-item label="在售房源：" prop="sellingTotal">
          <el-input v-model="infoData.sellingTotal" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">套</span>
          </el-input>
        </el-form-item>

        <el-form-item label="30天内成交：" prop="deal">
          <el-input v-model="infoData.deal" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">套</span>
          </el-input>
        </el-form-item>

        <el-form-item label="规划户数：" prop="plannednumber">
          <el-input v-model="infoData.plannednumber" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">户</span>
          </el-input>
        </el-form-item>

        <el-form-item label="车位个数：" prop="carplace">
          <el-input v-model="infoData.carplace" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">个</span>
          </el-input>
        </el-form-item>

        <el-form-item label="建筑结构：" prop="structure">
          <el-input v-model="infoData.structure" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="用水：" prop="water">
          <el-input v-model="infoData.water" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="用电：" prop="power">
          <el-input v-model="infoData.power" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="用气：" prop="gas">
          <el-input v-model="infoData.gas" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="绿化情况：" prop="green">
          <el-input v-model="infoData.green" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">%</span>
          </el-input>
        </el-form-item>

        <el-form-item label="容积比率：" prop="volume">
          <el-input v-model="infoData.volume" style="width:200px;" onkeyup="value=value.replace(/[^\d\.]/g,'')"></el-input>
        </el-form-item>

        <el-form-item label="物业费用：" prop="propertyFee">
          <el-input v-model="infoData.propertyFee" style="width:200px;" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
            <span slot="suffix">元/㎡</span>
          </el-input>
        </el-form-item>

        <el-form-item label="建成年代：" prop="builtYear">
          <el-input v-model="infoData.builtYear" style="width:200px;" onkeyup="value=value.replace(/[^\d]/g,'')">
            <span slot="suffix">年</span>
          </el-input>
        </el-form-item>

        <el-form-item label="物业用途：" prop="purpose">
          <el-input v-model="infoData.purpose" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="产权性质：" prop="nature">
          <el-input v-model="infoData.nature" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="物业公司：" prop="property">
          <el-input v-model="infoData.property" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="附近门店：" prop="branch">
          <el-input v-model="infoData.branch" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="小区配套：" prop="facilities">
          <el-input class="area-box" type="textarea" v-model="infoData.facilities" placeholder="小区配套" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="体育设施：" prop="sport">
          <el-input class="area-box" type="textarea" v-model="infoData.sport" placeholder="体育设施" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="小区描述：" prop="desc">
          <el-input class="area-box" type="textarea" v-model="infoData.desc" placeholder="小区描述" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="附近交通：" prop="traffic">
          <el-input class="area-box" type="textarea" v-model="infoData.traffic" placeholder="附近交通" style="width:510px;"></el-input>
        </el-form-item>

        <el-form-item label="小区封面：" prop="img">
          <!-- <img :src="infoData.img" alt="" width="250"> -->
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="infoData.img" :src="infoData.img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <div style="text-align: center;">
          <el-button @click="dialog.edit = false" style="width: 100px">取消</el-button>
          <el-button type="primary" @click="submit" style="width: 100px">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'estateList',
  data() {
    return {
      loading: false,
      initData: {
        list: [],
        activeImg: 0,
        tX: 0,
        imgArr: [],
      },
      options: {
        city: [
          {
            label: '不限',
            value: ''
          },
          {
            label: '广州',
            value: '广州'
          },
          {
            label: '深圳',
            value: '深圳'
          },
        ],
      },
      dialog: {
        check: false,
        edit: false
      },
      infoData: {
        id: 0,
        estateName: '',
        city: '',
        location: '',
        average: '',
        sellingTotal: '',
        deal: '',
        img: '',
        imgList: '',
        builtYear: '',
        purpose: '',
        address: '',
        growth: '',
        nature: '',
        property: '',
        branch: '',
        structure: '',
        plannednumber: '',
        carplace: '',
        builtArea: '',
        volume: '',
        green: '',
        water: '',
        power: '',
        gas: '',
        propertyFee: '',
        facilities: '',
        sport: '',
        desc: '',
        traffic: '',
      },
      rule: {
        estateName: [{ validator: this.validEstate, trigger: "blur" }],
        city: [{ validator: this.validCity, trigger: "blur" }],
        location: [{ validator: this.validLocation, trigger: "blur" }],
        address: [{ validator: this.validAddress, trigger: "blur" }],
        average: [{ validator: this.validAverage, trigger: "blur" }],
        builtArea: [{ validator: this.validBuiltArea, trigger: "blur" }],
        sellingTotal: [{ validator: this.validSellingTotal, trigger: "blur" }],
        deal: [{ validator: this.validDeal, trigger: "blur" }],
        plannednumber: [{ validator: this.validPlannednumber, trigger: "blur" }],
        carplace: [{ validator: this.validCarplace, trigger: "blur" }],
        structure: [{ validator: this.validStructure, trigger: "blur" }],
        water: [{ validator: this.validWater, trigger: "blur" }],
        power: [{ validator: this.validPower, trigger: "blur" }],
        gas: [{ validator: this.validGas, trigger: "blur" }],
        green: [{ validator: this.validGreen, trigger: "blur" }],
        volume: [{ validator: this.validVolume, trigger: "blur" }],
        propertyFee: [{ validator: this.validPropertyFee, trigger: "blur" }],
        builtYear: [{ validator: this.validBuiltYear, trigger: "blur" }],
        purpose: [{ validator: this.validPurpose, trigger: "blur" }],
        nature: [{ validator: this.validNature, trigger: "blur" }],
        property: [{ validator: this.validProperty, trigger: "blur" }],
        branch: [{ validator: this.validBranch, trigger: "blur" }],
      },
      // 条件
      tiaojian: {
        city: '',
        text: '',
      },
      params: {
        total: 0,
        city: '',
        page: 1,
        size: 10,
        text: '',
        firstRegion: '',
        secondRegion: '',
        average: '',
        builtYear: '',
        purpose: '',
      }
    }
  },
  created() {
    let oj = {
      title: '小区列表',
      nav: '1-4',
    };
    this.$emit('isTitle', oj);
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getEstateList',
        params: {
          city: this.params.city,
          page: this.params.page,
          size: this.params.size,
          text: this.params.text,
          firstRegion: this.params.firstRegion,
          secondRegion: this.params.secondRegion,
          average: this.params.average,
          builtYear: this.params.builtYear,
          purpose: this.params.purpose,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.list = res.data.data;
          this.params.total = res.data.total;
          this.loading = false;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
        this.loading = false;
      })
    },
    // 改变搜索条件
    goSearch() {
      this.params.page = 1;
      this.params.city = this.tiaojian.city;
      this.params.text = this.tiaojian.text;
      this.init();
    },
    // 编辑小区信息
    editInfo(o) {
      if (this.$refs.infoData2) {
        this.$refs.infoData2.resetFields();
      }
      this.infoData = {
        id: o.id,
        estateName: o.estateName,
        city: o.city,
        location: o.location,
        average: o.average,
        sellingTotal: o.sellingTotal,
        deal: o.deal,
        img: o.img,
        imgList: o.imgList,
        builtYear: o.builtYear,
        purpose: o.purpose,
        address: o.address,
        growth: o.growth,
        nature: o.nature,
        property: o.property,
        branch: o.branch,
        structure: o.structure,
        plannednumber: o.plannednumber,
        carplace: o.carplace,
        builtArea: o.builtArea,
        volume: o.volume,
        green: o.green,
        water: o.water,
        power: o.power,
        gas: o.gas,
        propertyFee: o.propertyFee,
        facilities: o.facilities,
        sport: o.sport,
        desc: o.desc,
        traffic: o.traffic,
      };
      this.dialog.edit = true;
    },
    // 查看小区信息
    checkInfo(o) {
      this.infoData = {
        estateName: o.estateName,
        city: o.city,
        location: o.location,
        average: o.average,
        sellingTotal: o.sellingTotal,
        deal: o.deal,
        img: o.img,
        imgList: o.imgList,
        builtYear: o.builtYear,
        purpose: o.purpose,
        address: o.address,
        growth: o.growth,
        nature: o.nature,
        property: o.property,
        branch: o.branch,
        structure: o.structure,
        plannednumber: o.plannednumber,
        carplace: o.carplace,
        builtArea: o.builtArea,
        volume: o.volume,
        green: o.green,
        water: o.water,
        power: o.power,
        gas: o.gas,
        propertyFee: o.propertyFee,
        facilities: o.facilities,
        sport: o.sport,
        desc: o.desc,
        traffic: o.traffic,
      };
      this.dialog.check = true;
    },
    // 提交小区信息
    submit() {
      this.$refs['infoData2'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: this.baseUrl + '/editEstate',
            data: this.infoData
          }).then(res => {
            console.log('res==>', res)
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.dialog.edit = false;
              this.init();
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            console.log('err==>', err)
            this.$message.error(res.data.msg)
          })
        } else {
          this.$message.warning('请完善所以信息')
          return
        }
      })
    },
    // 删除记录
    delRecord(o) {
      this.axios({
        method: 'post',
        url: this.baseUrl + '/deleteEstate',
        data: {
          id: o.id,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.$message.success('删除记录成功')
          this.params.page = 1;
          this.init();
        } else {
          this.$message.error('删除记录失败')
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
      this.init();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
    },

    // --------------------------------------验证-------------------------------------------
    // 验证小区名
    validEstate(rule, value, callback) {
      if (value == '') {
        callback(new Error('小区名不能为空'))
      } else {
        callback()
      }
    },
    // 验证城市
    validCity(rule, value, callback) {
      if (value == '') {
        callback(new Error('城市不能为空'))
      } else {
        callback()
      }
    },
    // 验证地区
    validLocation(rule, value, callback) {
      if (value == '') {
        callback(new Error('地区不能为空'))
      } else {
        callback()
      }
    },
    // 验证地址
    validAddress(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空地址'))
      } else {
        callback()
      }
    },
    // 验证均价
    validAverage(rule, value, callback) {
      if (value == '') {
        callback(new Error('均价不能为空'))
      } else {
        callback()
      }
    },
    // 验证建筑面积
    validBuiltArea(rule, value, callback) {
      if (value == '') {
        callback(new Error('建筑面积不能为空'))
      } else {
        callback()
      }
    },
    // 验证在售总数
    validSellingTotal(rule, value, callback) {
      if (value == '') {
        callback(new Error('在售总数不能为空'))
      } else {
        callback()
      }
    },
    // 验证30天之内成交量
    validDeal(rule, value, callback) {
      if (value == '') {
        callback(new Error('成交量不能为空'))
      } else {
        callback()
      }
    },
    // 验证规划户数
    validPlannednumber(rule, value, callback) {
      if (value == '') {
        callback(new Error('规划户数不能为空'))
      } else {
        callback()
      }
    },
    // 验证车位个数
    validCarplace(rule, value, callback) {
      if (value == '') {
        callback(new Error('车位个数不能为空'))
      } else {
        callback()
      }
    },
    // 验证建筑结构
    validStructure(rule, value, callback) {
      if (value == '') {
        callback(new Error('建筑结构不能为空'))
      } else {
        callback()
      }
    },
    // 验证用水
    validWater(rule, value, callback) {
      if (value == '') {
        callback(new Error('用水不能为空'))
      } else {
        callback()
      }
    },
    // 验证用电
    validPower(rule, value, callback) {
      if (value == '') {
        callback(new Error('用电不能为空'))
      } else {
        callback()
      }
    },
    // 验证用气
    validGas(rule, value, callback) {
      if (value == '') {
        callback(new Error('用气不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validGreen(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validVolume(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validPropertyFee(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validBuiltYear(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validPurpose(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validNature(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validProperty(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
    // 验证
    validBranch(rule, value, callback) {
      if (value == '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    },
  }
}
</script>

<style lang="less" scoped>
.estateList {
  background-color: #fff;
  .title {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 30px;
    text-align: center;
  }
}
</style>